<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-全站题目</title>
</head>
<body>
<el-menu
        id="menu"
        default-active="2"
        class="el-menu-vertical-demo"
        style="width: 135px;float: left"
>
    <el-menu-item index="0" @click="toMain">
        <i class="el-icon-help"></i>
        <span slot="title">主页</span>
    </el-menu-item>
    <el-menu-item index="1" @click="toMyQuestion">
        <i class="el-icon-location"></i>
        <span slot="title">我的题目</span>
    </el-menu-item>
    <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">全站题目</span>
    </el-menu-item>
    <el-menu-item index="3" @click="toDoQuestion">
        <i class="el-icon-setting"></i>
        <span slot="title">练习题目</span>
    </el-menu-item>
    <el-menu-item index="4" @click="toAddQuestion">
        <i class="el-icon-document"></i>
        <span slot="title">添加题目</span>
    </el-menu-item>
</el-menu>

<div id="app" v-loading="loadingTable" style="overflow: scroll;height: 100%">

    <!--抽屉：显示题目详情-->
    <el-drawer
            title="题目详情"
            size="50%"
            :visible.sync="drawerDetails"
            :before-close="closeDrawerDetails">
        <el-form :model="currentQuestion" label-position="right" label-width="80px" style="width: 100%">
            <p style="text-align: center">{{currentQuestion.kind}}</p>
            <el-form-item label="题目">
                <el-card
                        shadow="hover"
                        body-style="padding: 0px;margin: 0px;margin-left: 10px;"
                        style=" margin-right: 10px">
                    <span style="white-space: pre-wrap;">{{currentQuestion.question}}</span>
                </el-card>
            </el-form-item>
            <template v-for="(choice, index) in currentQuestion.choice">
                <el-form-item :label="choiceOfAlpha[index]"
                              v-if="currentQuestion.kindInt === 0">
                    <el-card
                            shadow="hover"
                            body-style="padding: 0px;margin: 0px;margin-left: 10px;"
                            style=" margin-right: 10px">
                        <span style="white-space: pre-wrap;">{{choice}}</span>
                    </el-card>
                </el-form-item>
            </template>
            <el-form-item label="答案">
                <el-card
                        v-for="(answer, index) in currentQuestion.answer"
                        shadow="hover"
                        body-style="padding: 0px;margin: 0px;margin-left: 10px;"
                        style=" margin-right: 10px; margin-bottom: 5px">
                    <span style="white-space: pre-wrap;">{{answer}}</span>
                </el-card>
            </el-form-item>
            <el-form-item label="创建者">
                {{currentQuestion.creator}}
            </el-form-item>
            <el-form-item label="公开">
                {{currentQuestion.open}}
            </el-form-item>
            <el-form-item label="分类">
                {{currentQuestion.category}}
            </el-form-item>
            <el-form-item label="笔记">
                <el-button type="text" @click="showAddNote">添加笔记</el-button>
                <el-card
                        v-loading="loadingAddNote"
                        v-if="showAddNoteCard"
                        shadow="hover"
                        body-style="padding: 0px; margin: 5px;margin-left: 10px;margin-right: 10px;"
                        style="margin-bottom: 10px; margin-right: 10px">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 15}"
                            v-model="note.content"
                            placeholder="请输入笔记内容"
                            clearable
                            style="margin-bottom: 10px"></el-input>
                    公开<el-switch v-model="note.open"></el-switch>
                    <el-button type="primary" @click="addNote" style="float: right;">确认添加</el-button>
                </el-card>
                <el-card
                        v-for="(note, index) in currentNotes"
                        shadow="hover"
                        body-style="padding: 0px; margin: 0px;margin-left: 10px;"
                        style="margin-bottom: 10px; margin-right: 10px">
                    <el-row>
                        <span style="white-space: pre-wrap; padding: 0">{{note.content}}</span>
                    </el-row>
                    <el-divider></el-divider>
                    <el-col :span="22" style="float: left">
                        <span style="color: #909399">{{note.nickname}} 最后修改于 {{note.time}}</span>
                        <span style="color: #909399" v-if="note.creator == userInfo.id">({{openStatus[note.open]}})</span>
                    </el-col>
                    <el-col :span="2" style="float: right">
                        <el-button v-if="note.creator == userInfo.id" type="text" @click="editNote(note.id)">修改
                        </el-button>
                    </el-col>
                </el-card>
            </el-form-item>
        </el-form>
    </el-drawer>

    <div style="display: flex; justify-content: center;">
        <el-card class="card" style="height:100%;width: 100%;margin:0 0">
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <p style="margin-right: 10px;width: 35px">分类</p>
                    <el-select
                            v-model="selectedCategories"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="queryCategories"
                            :loading="loadingSelectCategory"
                            style="width: 500px">
                        <el-option
                                v-for="category in categories"
                                :key="category.value"
                                :label="category.name"
                                :value="category.id">
                            <span style="float: left">{{ category.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">[{{ category.nickname }}]创建</span>
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="display: flex;justify-content: space-between;align-items: center;">
                    <div style="display: flex;align-items: center;">
                        <p style="margin-right: 10px;width: 35px">题型</p>
                        <el-checkbox-group v-model="checkboxQuestions">
                            <el-checkbox-button v-for="(kind,index) in questionKinds" :label="index" :key="kind">
                                {{kind}}
                            </el-checkbox-button>
                        </el-checkbox-group>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <p style="margin-right: 10px;width: 35px">题目</p>
                    <el-input
                            placeholder="请输入题目内容"
                            v-model="inputQuestion"
                            clearable
                            style="width: 500px">
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <el-button type="primary" @click="query">筛选</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>

    <!--题目表格-->
    <el-table
            ref="questionTable"
            :data="tableQuestions"
            height="98vh"
            border
            style="width: 100%"
            :header-cell-style="{'text-align':'center'}"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                align="center">
        </el-table-column>
        <el-table-column
                label="序号"
                type="index"
                :index="1"
                width="50"
                align="center">
        </el-table-column>
        <el-table-column
                sortable
                prop="kind"
                label="题型"
                min-width="10%">
        </el-table-column>
        <el-table-column
                prop="category"
                label="分类"
                min-width="15%">
        </el-table-column>
        <el-table-column
                sortable
                prop="question"
                label="题目内容"
                min-width="60%">
        </el-table-column>
        <el-table-column
                label="操作"
                min-width="5%"
                align="center">
            <template slot-scope="scope">
                <el-button @click="seeDetail(scope.row)" type="text" size="small">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<script src="../../js/common.js"></script>
<script src="../../js/all_question.js"></script>
<script src="../../js/menu.js"></script>

<link rel="stylesheet" href="../../css/common.css">
</html>